<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { NButton, NIcon } from 'naive-ui'
import { ArrowBack, ArrowForward } from '@vicons/ionicons5'
import { convertFileSrc } from '@tauri-apps/api/tauri'
import { readDir, readTextFile, BaseDirectory, FileEntry } from '@tauri-apps/api/fs'

const identifier = 'tech.jiyun.ascum'
const canvasRef = ref<HTMLCanvasElement>()
let files = [] as FileEntry[]
let imageFiles = [] as FileEntry[]
let recordValues = [] as String[][]
let index = 0
let rois = [] as number[][]
const logText = ref('')

async function next () {
  index += 1
  index = index % imageFiles.length
  draw()
} async function pre () {
  index -= 1
  index = index % imageFiles.length
  draw()
}
async function draw () {
  const values = recordValues[index]
  const img = new Image()
  const file = imageFiles[index].path
  img.src = convertFileSrc(file) + '?v=' + Math.random()
  img.crossOrigin = 'anonymous'
  img.onload = async () => {
    const mat = cv.imread(img)
    // cv.cvtColor(mat, mat, cv.COLOR_BGR2GRAY)
    for (let i = 0; i < rois.length; i++) {
      // const _mat = mat.roi(new cv.Rect(...rois[i]))
      // for (let i = 0; i < _mat.rows; i++) {
      //   for (let j = 0; j < _mat.cols; j++) {
      //     _mat.ucharPtr(i, j)[0] = Math.max(0, Math.min(255, Math.round(_mat.ucharPtr(i, j)[0] * 1.7 - 105)))
      //   }
      // }
      cv.rectangle(mat, new cv.Point(rois[i][0], rois[i][1]), new cv.Point(rois[i][0] + rois[i][2], rois[i][1] + rois[i][3]), new cv.Scalar(0, 0, 255, 255), 1)
      cv.putText(mat, values[i], new cv.Point(rois[i][0] - 50, rois[i][1] + 20), cv.FONT_HERSHEY_PLAIN, 1.5, new cv.Scalar(0, 255, 0, 255), 2)
    }
    cv.imshow(canvasRef.value, mat)
    mat.delete()
  }
}

onMounted(async () => {
  canvasRef.value!.width = window.innerWidth
  canvasRef.value!.height = window.innerHeight
  // rois
  const scFiles = await readDir(identifier, { dir: BaseDirectory.Document, recursive: false })
  const file = scFiles.find(v => !v.children?.length && v.path.endsWith(`${window.screen.width}_${window.screen.height}` + '.screen.json'))
  if (!file) {
    logText.value = '无当前分辨率配置'
    return
  }
  rois = JSON.parse(await readTextFile(identifier + '/' + file.name, { dir: BaseDirectory.Document })) as number[][]
  if (Array.isArray(rois) && rois.length === 19 && rois.findIndex(v => v.length !== 4) < 0) {
    //
  } else {
    logText.value = '配置内容错误'
    return
  }

  files = await readDir(identifier + '/imgs', { dir: BaseDirectory.Document })
  imageFiles = files.filter(v => v.name?.endsWith('png'))
  for (let i = 0; i < imageFiles.length; i++) {
    const text = await readTextFile(identifier + '/imgs/' + imageFiles[i].name?.replace('png', 'txt').replace('capture_', ''), { dir: BaseDirectory.Document })
    recordValues.push(text.split('\n'))
  }
  draw()
})
// invoke('toggle_deltool')
</script>

<template>
  <div class="explorer">
    <canvas ref="canvasRef"></canvas>
    <div class="actions">
      <n-button text @click="pre">
        <n-icon>
          <ArrowBack />
        </n-icon>
      </n-button>
      <n-button text @click="next">
        <n-icon>
          <ArrowForward/>
        </n-icon>
      </n-button>
    </div>
  </div>
</template>

<style scoped lang="less">
.explorer {
  width: 100vw;
  height: 100vh;
  position: relative;
  canvas {
    width: 100vw;
    height: 100vh;
  }
  .actions {
    box-sizing: border-box;
    position: absolute;
    width: 100vw;
    top: calc(50% - 16px);
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
    button {
      font-size: 48px;
      color: #00e1ff;
    }
  }
}
</style>
